<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>嵌套路由</title>
    <script src="../vue.js"></script>
    <script src="../vue-router.js"></script>
    <style>
        ul,li,h1{
            padding: 0;
            margin: 0;
            list-style: none;
        }

        #app{
           width: 100%; 
           display: flex;
           flex-direction: row;
        }

        ul{
            width: 200px;
            flex-direction: column;
            color: #fff;
        }

        li{
            flex:1;
            background: #000;
            margin: 5px auto;
            text-align: center;
            line-height: 30px;
        }

        .about-detail{
            flex: 1;
            margin-left: 30px;
        }

        .about-detail h1{
            font-size: 24px;
            color: blue;
        }
    </style>
</head>
<body>
    <div id="app">
        <ul>
            <router-link to="/about" tag="li">关于公司</router-link>
            <router-link to="/contact" tag="li">联系我们</router-link>
        </ul>
        <router-view></router-view>
    </div> 

    <template id="contact-tmp">
        <div class="about-detail">
            <h1>联系我们</h1>
            <p>公司在北京海淀区，主要业务核酸检测，疫苗注射......</p>
        </div>
    </template>

    <template id="about-tmp">
        <div>
            <h1>北京科兴生物有限公司</h1>
            <router-link to="/about/detail">公司简介</router-link>
            <router-link to="/about/governance">公司治理</router-link>
            <router-view></router-view>
        </div>
    </template>

    <script>

        var contact={
            template:'#contact-tmp'
        }

        var about={
            template:'#about-tmp'
        }

        var detail={
            template:'<p>全球领先公司... ...</p>'
        }

        var governance={
            template:'<p>公司以客户为中心... ...</p>'
        }

        var router=new VueRouter({
            routes:[
                {path:'/',redirect:'/about'},
                {
                    path:'/about',component:about,
                    children:[
                        {path:'detail',component:detail},
                        {path:'governance',component:governance},
                    ]
                },

                {
                    path:'/contact',component:contact
                }

            ]
        })
        var vm=new Vue({
            el:"#app",
            router
        })

    </script>
</body>
</html>